<template>
  <div class="wrapper">
    <minbar title="地址管理" :isPadding="true"></minbar>
    <list class="x-scroller" show-scrollbar="false" >
      <refresh class="refresh"  @refresh="onrefresh" :display="refreshing ? 'show' : 'hide'">
          <loading-indicator class="indicator"></loading-indicator>
      </refresh>
      <cell>
        <div class="x-content" v-for="(v,index) in addressData" :key="index">
          <div class="x-info">
            <!-- 人员信息层 -->
            <div class="x-info-div">
              <text class="x-info-text">{{v.name}}</text>
              <text class="x-info-text">{{v.mobile}}</text>
            </div>
            <!-- 地址 -->
            <text class="x-address">{{v.detail}}</text>
          </div>
          <!-- 操作层 -->
          <div class="x-content-bottom">
            <div class="x-flex1">
              <div class="x-radio" @click="setMoren(v)">
                <text class="iconfont x-radio-yes" v-if="v.is_default">&#xe661;</text>
                <text class="iconfont x-radio-no" v-if="!v.is_default">&#xe660;</text>
                <text class="x-radio-text">{{v.is_default?'默认地址':'设为默认地址'}}</text>
              </div>
            </div>
            <div class="x-flex1 x-button">
              <text class="iconfont x-icon-text" @click="editAddress(v.id)">&#xe658;编辑</text>
              <text class="iconfont x-icon-text" @click="deleteAddress(v.id)">&#xe65c;删除</text>
            </div>
          </div>
        </div>
      </cell>
    </list>
    <!-- 底部按钮 -->
    <div class="x-bottom">
      <text class="x-bottom-text" @click="newAddress">新增地址</text>
    </div>
    <!-- 对话框组件 -->
        <x-dialog title="温馨提示"
                content="确定删除当前地址?"
                confirm-text="确定"
                cancel-text="取消"
                mainBtnColor="#654d21"
                overlay-can-close="false"
                :show="dialogShow"
                :single="false"
                top=550
                @cancelBtnClick="cancelBtnClick"
                @okBtnClick="okBtnClick">
        </x-dialog>
  </div>
</template>

<script>
import asCore from "../../../common/js/core";
const navigator = weex.requireModule('navigator');
const address = new BroadcastChannel('address');
export default { 
  components: {
    "minbar" : require("../../../common/component/minbar.vue"),
    "x-dialog": require("../../../common/component/dialog.vue")
  },
  data() {
    return {
      refreshing:false,
      addressData:[],
      /**对话框 */
      dialogShow:false,
      currentID:""
    };
  },
  created() {
    address.onmessage = this.getData;
    this.getData();
  },
  methods: {
    onrefresh(){
      this.refreshing = true;
      this.getData(()=>{
        this.refreshing = false;
      });
    },
    /**获取列表 */
    getData(callback){
      asCore.post("/member/address/list",{},(data,msg,flag)=>{
        if(flag==true){
          var pData = data;
          for(var i=0;i<pData.length;i++){
            if(!pData[i].is_default){
              pData[i].is_default = false;
            }
          }
          this.addressData = pData;
        }
        callback && callback();
      });
    },
    /**编辑地址 */
    editAddress(rowid){
      navigator.pushParam(
        asCore.localpath + "tailor/app/address/addressEdit.js",{
            rowid: rowid,
            type:"edit"
        }
      );
    },
    /**新增地址 */
    newAddress(){
      navigator.pushParam(
        asCore.localpath + "tailor/app/address/addressEdit.js",{
            type:"new"
        }
      );
    },
    /**设置为默认地址 */
    setMoren(data){
      for(var i=0;i<this.addressData.length;i++){
        this.addressData[i].is_default = false;
      }
      data.is_default = true;
      var param = {
            id:data['id'],
            name:data['name'],
            mobile:data['mobile'],
            district_id:data['district_id'],
            address:data['address'], 
            is_default:true
        };
      asCore.post("/member/address/update",param,(data,msg,flag)=>{});
    },
    /**删除收货地址 */
    deleteAddress(rowid){
      this.currentID = rowid;
      this.dialogShow = true;
    },
    cancelBtnClick() {
      this.dialogShow = false;
    },
    okBtnClick() {
      this.dialogShow = false;
      asCore.post("/member/address/delete",{id:this.currentID},(data,msg,flag)=>{
         //asCore.alert(JSON.stringify(data));
        if(flag==true){
          this.getData();
        }else{
          asCore.toast("删除数据失败!");
        }
      });
    }
  }
};
</script>
<style scoped>
.wrapper {
  background-color: #dedfe1;
  position: relative;
}
.iconfont {
    font-family:iconfont;
}
.x-flex1 {
  flex: 1;
}
.x-scroller {
  position: absolute;
  top: 130px;
  left: 0;
  right: 0;
  bottom: 95;
}
.x-bottom {
  position: absolute;
  bottom: 0;
  width: 750px;
  height: 95px;
  background-color: #887147;
}
.x-bottom-text {
  color: #fff;
  font-size: 32px;
  line-height: 95px;
  text-align: center;
}
.x-content {
  background-color: #fff;
  margin-bottom: 25px;
}
.x-info {
  padding: 25px;
  padding-bottom: 35px;
}
.x-info-div {
  flex-direction: row;
}
.x-info-text {
  padding-right: 20px;
  color: #1e1d22;
  font-size:33px;
}
.x-address {
  font-size: 28px;
  color: #413f4c;
  padding-top: 5px;
}
.x-content-bottom {
  flex-direction: row;
  background-color: #fff;
  height: 90px;
  border-top-color: #dedfe1;
  border-top-width: 1px;
}
.x-button {
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}
.x-icon-text {
  font-size: 30px;
  height: 90px;
  line-height: 90px;
  color: #8b7a5c;
  margin-right: 25px;
}
.x-radio {
  flex-direction: row;
  align-items: center;
  height: 90px;
  padding-left: 25px;
}
.x-radio-yes {
  line-height: 90px;
  color: #8b7a5c;
  font-size:37px;
  margin-right: 10px;
  top:3px;
}
.x-radio-no {
  line-height: 90px;
  color: #c1c1c1;
  font-size:37px;
  margin-right: 10px;
  top:3px;
}
.x-radio-text {
  font-size:30px;
  color: #666;
}
 /*刷新加载更多类的样式*/
.refresh {
  width: 750;
  display: flex;
  align-items: center;
}
.indicator {
  margin-top: 30px;
  margin-bottom: 20px;
  height: 70px;
  width: 70px;
  color: #ce2020;
}
.indicator-text {
  color: #888;
  font-size: 30px;
  text-align: center;
}
</style>
